<template>
	<Layout>
		<el-row>
			<el-col :span="24">
				<el-col :span="9" :xs="24" :sm="24" :md="9" :lg="9">
					<div class="BusLeftBox">
						<h6 class="BusLeh6">我们将为您提供以下帮助，方便您了解 锦锐科技</h6>
						<p class="BusLep1">详尽的产品功能和服务介绍，为您打造最专业的解决方案</p>
						<p class="BusLep2">7*24小时在线产品顾问为您服务，支持线上进行深度沟通</p>
					</div>
				</el-col>
				<el-col :span="15" :xs="24" :sm="24" :md="15" :lg="15">
					<div class="BusrightBox">
						<div class="Busrightcenter">
							<h3 class="BusRih3">业务咨询</h3>

							<el-form :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline"
								label-width="90px" label-position="left">
								<el-form-item label="姓名:" prop="username">
									<el-input v-model="formInline.username" placeholder="请输入联系人姓名"></el-input>
								</el-form-item>
								<el-form-item label="公司名称:" prop="corporname">
									<el-input v-model="formInline.corporname" placeholder="请输入公司名称"></el-input>
								</el-form-item>

								<el-form-item label="联系电话" prop="phone">
									<el-input v-model="formInline.phone" placeholder="请输入联系人手机号码" maxlength="11"></el-input>
								</el-form-item>

								<!-- <el-form-item label="企业邮箱" prop="email">
									<el-input v-model="formInline.email" placeholder="请输入企业邮箱"></el-input>
								</el-form-item> -->

								<el-form-item label="咨询内容">
									<el-input type="textarea" :rows="2" placeholder="请输入咨询内容" v-model="formInline.desc">
									</el-input>
								</el-form-item>
								<div style="display: flex;align-items: center;">
									<el-checkbox v-model="checked" @change="checkchange"></el-checkbox>
									<p style="margin-left: 10px;font-size: 12px;">已阅读并同意 <span class="fuwutkuan"
											@click="fuwutk">服务条款</span> 和<span class="fuwutkuan"
											@click="yinsixy">隐私政策</span></p>
								</div>
								<el-button class="SubmitTo" @click="sendPostRequest">提交</el-button>
							</el-form>
						</div>
					</div>
				</el-col>
			</el-col>
		</el-row>
	</Layout>
</template>

<script>
import axios from 'axios';
import Layout from '../components/common/Layout'
export default {
	components: {
		Layout
	},
	data() {
		return {
			checked: true,
			formInline: {
				username: '',
				corporname: '',
				phone: '',
				// email: '',
				desc: ''
			},
			rules: {


				// username: [
				// 	{ required: true, message: '请输入姓名', trigger: 'blur' }
				// ],
				// corporname: [
				// 	{ required: true, message: '请输入公司名称', trigger: 'blur' }
				// ],
				phone: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ min: 11, max: 11, message: '长度在 11位数字', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				]
			}

		}
	},
	methods: {
		fuwutk() {
			this.$router.push({
				path: '/finance'
			})
		},
		yinsixy() {
			this.$router.push({
				path: '/financetwo'
			})
		},
		checkchange(e) {
			console.log(e)
		},
		async sendPostRequest() {
			try {
				const url = 'https://www.tejinrui.com/api/local/userLocal';
				const params = {
					phone: this.formInline.phone,
					name: this.formInline.username,
					companyName:this.formInline.corporname,
					content:this.formInline.desc
				};
				const response = await axios.post(url, params);
				this.$message.success(response.data.msg)
				this.formInline.phone=''
				this.formInline.username=''
				this.formInline.corporname=''
				this.formInline.desc=''
			} catch (error) {
				console.error('Error:', error);
				this.$message.success(error)
			}
		}
	},
}
</script>
<style lang="scss" scoped>
.BusLeftBox {
	position: relative;
	height: 860px;
	background-image: url('../assets/images/banner/bussineyw.png');
	background-size: 100% 100%;

	.BusLeh6 {
		position: absolute;
		top: 15%;
		left: 10%;
		font-size: 14px;
		color: #fff;
	}

	.BusLep1 {
		position: absolute;
		top: 25%;
		left: 10%;
		font-size: 14px;
		color: #fff;
	}

	.BusLep2 {
		position: absolute;
		top: 28%;
		left: 10%;
		font-size: 14px;
		color: #fff;
	}
}

.BusrightBox {

	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;

	.Busrightcenter {
		width: 400px;
	}

	.BusRih3 {
		margin: 120px 0 60px 0;
	}

	.fuwutkuan {
		color: #0457F2;
		cursor: pointer;
	}

	.SubmitTo {
		width: 437px;
		height: 44px;
		border-radius: 4px;
		opacity: 1;
		background: #2966FF;
		border: none;
		color: #fff;
		margin: 30px 0;
	}
}
</style>